
<template>
	<div>
		<div class="klinebox">
			<div id="kline_container" ref="klinet"></div>
		</div>
	</div>
</template>

<script>
import Kline from 'kline'
import './lib/kline.css'
import 'jquery-mousewheel'
import {bus} from '../../../../../../main.js'
export default {
	name: 'kline',
	data() {
		return {
			kline: {},
			symbol: 1,
		}
	},

	created() {
		this.symbol = this.$route.params.ftrademappingid
		if (this.symbol == undefined) {
			this.symbol = 1
		}
	},
	methods: {
		lalal(id) {
			//K线
			this.kline.setSymbol(id, 'BTC')
			this.kline.resend()
		},
	},
	beforeMount() {},
	mounted() {
		this.kline = new Kline({
			element: '#kline_container',
			symbol: this.symbol, //默认是1的那个币种的k线，切换时候触发修改值。 看git上的文档。https://github.com/chxj1992/kline
			range: '1m',
			width:(window.innerWidth-290)*2,
			height:1300,
			symbolName: '比特币',
			type: 'poll', // poll/stomp
			//这个地方填写k线服务器的后台接口
			//url: 'http://47.75.76.138:8100/app/kline/fullperiod',
			// url: 'http://120.78.69.50:8100/app/kline/fullperiod',
			url: 'http://47.244.127.8:8100/app/kline/fullperiod',
			//url: 'https://raw.githubusercontent.com/chxj1992/kline/master/examples/mock.json',
		})
		this.kline.draw()
		let vm = this
		$(window).resize(function() {
			vm.kline.setSymbol(vm.symbol, 'BTC')
			vm.kline.resend()
			$('#chart_canvasGroup canvas').attr({width: (window.innerWidth - 290) * 2})
		})
		bus.$on('choostBZ', text => {
			this.symbol = text
			this.lalal(text)
		})

		bus.$on('choostBZ1', text => {
			this.symbol = text
			this.lalal(text)
		})
	},
	destroyed() {
		this.kline = {}
	},
}
</script>

<style scoped>
.klinebox {
	height: 650px;
	width: 100%;
	background-color: #181b2a;
	color: var(--clr0);
}
</style>
